<template>
  <div id="order-service">
    <el-form :model="order" label-width="100px">
      <p>原订单号：{{dataOrder.orderNo}}</p>
      <hr />
      <div class="info">
        <p> 订单信息</p>
        <br />
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="服务方式">
              <el-select v-model="order.serviceType" placeholder="请选择" :clearable="true">
                <el-option label="上门" value="SM"></el-option>
                <el-option label="到店" value="DD"></el-option>
                <el-option label="寄送" value="JS"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <div v-if="order.serviceType=='JS'">
            <el-col :span="24">
              <el-form-item label="维修中心">
                <el-select v-model="order.centerName">
                  <el-option v-for="item in datalist.centerlist" :label="item.centerName" :value="item" :key="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="order.serviceType=='DD'">
            <el-col :span="24">
              <el-form-item label="到店维修">
                <el-select v-model="order.shopName">
                  <el-option v-for="item in datalist.storeList" :value="item" :label="item.shopName" :key="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="24" v-if="order.serviceType == 'SM' || order.serviceType=='DD'">
            <el-form-item label="预约时间">
              <el-date-picker v-model="editinfo.dated" type="date" placeholder="日期"></el-date-picker>
              <el-time-select v-model="editinfo.startTime"
                :picker-options="{start: '08:00', step: '01:00', end: '22:00'}" placeholder="开始时间"></el-time-select>
              <el-time-select v-model="editinfo.endTime" :picker-options="{start: '08:00', step: '01:00', end: '22:00'}"
                placeholder="结束时间"></el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单标识:">
              售后
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户备注">
              <el-input v-model="order.remark" icon="edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="维修师备注">
              <el-input v-model="order.wxsRemark" icon="edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客服备注">
              <el-input v-model="order.serviceRemark" icon="edit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button @click="canle">取消</el-button>
      <el-button type="primary" @click="saveser">保存</el-button>
    </div>
  </div>
</template>
<script>
  import r from '../../utils/RequestUtil'
  import moment from 'moment'
  export default {
    name: "order_service",
    data: function () {
      return {
        order: {
          serviceType: null,
          serviceRemark: null,
          wxsRemark: null,
          remark: null,
          shopName: null,
          centerName: null
        },
        editinfo: {
          dated: null,
          startTime: null,
          endTime: null
        },
        datalist: {
          centerlist: [],
          storeList: []
        }
      }
    },
    methods: {
      saveser() {
        if (this.order.serviceType === null || this.order.serviceType === "") {
          r.message("请选择服务方式", "warning");
          return;
        }
        this.dataOrder.serviceType = this.order.serviceType;
        this.dataOrder.serviceRemark = this.order.serviceRemark;
        this.dataOrder.wxsRemark = this.order.wxsRemark;
        this.dataOrder.remark = this.order.remark;
        if (this.order.serviceType === "SM" || this.order.serviceType === "DD") {
          this.dataOrder.orderService.beginTime = moment(moment(this.editinfo.dated).format('YYYY-MM-DD') + " " + this
            .editinfo.startTime).toDate()
          this.dataOrder.orderService.endTime = moment(moment(this.editinfo.dated).format('YYYY-MM-DD') + " " + this
            .editinfo.endTime).toDate()
        } else {
          this.dataOrder.orderService.beginTime = null;
          this.dataOrder.orderService.endTime = null;
        }
        if (this.order.serviceType === "DD") {
          this.dataOrder.orderService.shopId = this.order.shopName.id;
          this.dataOrder.orderService.shopName = this.order.shopName.shopName;
        } else {
          this.dataOrder.orderService.shopId = null;
          this.dataOrder.orderService.shopName = null;
        }
        if (this.order.serviceType === "JS") {
          this.dataOrder.orderService.mainTainCenterId = this.order.centerName.id;
          this.dataOrder.orderService.mainTainCenterName = this.order.centerName.centerName;
        } else {
          this.dataOrder.orderService.mainTainCenterId = null;
          this.dataOrder.orderService.mainTainCenterName = null;
        }

        this.$emit("saveser", this.dataOrder);
        this.returnNull();
      },
      canle() {
        this.$emit("canleser");
        this.returnNull();
      },
      returnNull() {
        this.order.serviceType = null;
        this.order.serviceRemark = null;
        this.order.wxsRemark = null;
        this.order.remark = null;
        this.editinfo.dated = null;
        this.editinfo.startTime = null;
        this.editinfo.endTime = null;
        this.order.centerName = null;
        this.order.shopName = null;
      }
    },
    computed: {

    },
    props: {
      dataOrder: {
        type: Object,
        required: true
      }
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .label {
    font-size: 14px;
    width: 70px;
    padding: 0 8px;
    text-align: right;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .detail {
    padding-bottom: 20px;
  }

  .info {
    display: table;
    width: 100%;
    margin-top: 10px;
  }

  .info-title {
    display: table-cell;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  .info-msg {
    display: table-cell;
    margin-left: 100px;
    margin-right: auto;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

</style>
